const jsPsych = initJsPsych();
const timeline = [];
const serArray = ['01', '02', '03', '04', '05', '06'];
const emoArray = [
    {
        key: 'a',
        value: '愤怒'
    },
    {
        key: 'd',
        value: '厌恶'
    },
    {
        key: 'f',
        value: '恐惧'
    },
    {
        key: 'h',
        value: '快乐'
    },
    {
        key: 'n',
        value: '中性'
    },
    {
        key: 's',
        value: '悲伤'
    },
]

// 预加载
timeline.push({
    type: jsPsychPreload,
    // 遍历情绪识别面部表情的所有文件
    images: (() => {
        const array = [];
        serArray.forEach(ser => {
            emoArray.forEach(emo => {
                array.push(`images/${ser}${emo.key}.jpg`)
            })
        })
        return array;
    })(),
    audio: [],
    video: []
});

// 全屏
timeline.push({
    type: jsPsychFullscreen,
    message: `
        <h3>提示</h3>
        <p>当你按下确认按钮后会进入正式实验！</p>
    `,
    button_label: "确认"
});

// 指导语
timeline.push({
    type: jsPsychHtmlButtonResponse,
    stimulus:
        `
        <h3>指导语</h3>
        <p class="instruct-p">欢迎参加本次实验！实验的目的是研究人们对不同刺激的反应。实验分为多个部分，每个部分都有不同的任务和问题。在每个部分开始时，会有详细的说明，请仔细阅读并按照指示进行操作。实验中，你将看到或听到各种刺激材料，如图片、声音、文字等，并需要对它们做出相应的判断或反应。</p>
        <p class="instruct-p">请尽量在整个实验过程中保持专注，不要离开座位。如果你在实验中有任何疑问或不适，请立即告知实验指导员。</p>
        `,
    choices: ['进入实验']
});

// 收集信息
timeline.push({
    type: jsPsychSurveyHtmlForm,
    preamble: `<h3>请填写以下信息</h3>`,
    html: `
        <div class="form">
            <div class="form-item-flex">
                <label>学号：</label>
                <input class="form-input" required name="number" type="text" placeholder="请输入学号"/>
            </div>
            <div class="form-item-flex">
                <label>姓名：</label>
                <input class="form-input" required name="name" type="text" placeholder="请输入姓名"/>
            </div>
            <div class="form-item-flex">
                <label>年级：</label>
                <input class="form-input" required name="grade" type="text" placeholder="请输入年级"/>
            </div>
            <div class="form-item-flex">
                <label>邮箱：</label>
                <input class="form-input" required name="email" type="email" placeholder="请输入邮箱"/>
            </div>
            <div class="form-item-flex">
                <label>性别：</label>
                <select class="form-select" required>
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>
        </div>
    `,
    button_label: '提交'
});

// 生成正式实验内容
(() => {
    const items = []
    serArray.forEach(ser => {
        emoArray.forEach(emo => {
            items.push({
                type: jsPsychHtmlButtonResponse,
                stimulus: `
                    <div>
                        <img src="images/${ser}${emo.key}.jpg" width="600"/>
                    </div>
                    <p>请点击下列按钮选择被试情绪</p>
                `,
                choices: emoArray.map(item => item.value),
                // 设置答案导出到CSV
                on_finish(data) {
                    // 试次的答案
                    data.answer = emo.value
                    // 选择的答案
                    data.response = emoArray[data.response].value
                    // 选择是否正确
                    data.correct = data.answer === data.response
                }
            })
        })
    })
    items.sort(() => Math.random() - 0.5)
    items.forEach(item => timeline.push(item))
})();


// 处理下载数据文件
timeline.push({
    type: jsPsychHtmlButtonResponse,
    stimulus: `
        <p>感谢您参与本次实验！您的参与对我们的研究非常重要，我们非常感激您为此付出的时间和精力。</p>
        <p>您的实验数据已经成功收集，并且已经下载到本地。</p>
    `,
    choices: ['关闭'],
    on_load() {
        const csv = jsPsych.data.get().csv()
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        saveAs(blob, Date.now() + ".csv");
    },
    on_finish() {
        window.close()
    }
})


jsPsych.run(timeline)